<template>
  <div>
    <div class="card">
      <div class="row no-gutters">
        <div class="col-md-4">
          <img
            src="@assets/images/users/avatar-7.jpg"
            class="card-img"
            alt="shreyu"
          />
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title mb-1">Shreyu N</h5>
            <h6 class="text-muted font-weight-normal mt-0 mb-3"
              >New York, USA</h6
            >
            <div class="card-text row text-center">
              <div class="col">
                <button
                  type="button"
                  class="btn btn-primary btn-sm btn-block mr-1"
                  >Follow</button
                >
              </div>
              <div class="col">
                <button type="button" class="btn btn-white btn-sm btn-block"
                  >Message</button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-body p-3">
        <div class="media">
          <img
            src="@assets/images/users/avatar-7.jpg"
            class="mr-3 avatar-lg rounded"
            alt="shreyu"
          />
          <div class="media-body">
            <h5 class="mt-1 mb-0">Shreyu N</h5>
            <h6 class="font-weight-normal mt-1 mb-1">
              <a href>@shreyu</a>
            </h6>
            <p class="text-muted">Designer | Creative | Thinker</p>
          </div>
        </div>
        <div class="row mt-2 border-top pt-2">
          <div class="col">
            <div class="media">
              <span class="icon-dual align-self-center mr-2">
                <feather type="users"></feather>
              </span>
              <div class="media-body">
                <h5 class="mt-2 pt-1 mb-0 font-size-16">1.9M</h5>
                <h6 class="font-weight-normal mt-0">Followers</h6>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="media">
              <span class="icon-dual align-self-center mr-2">
                <feather type="eye"></feather>
              </span>
              <div class="media-body">
                <h5 class="mt-2 pt-1 mb-0 font-size-16">19M</h5>
                <h6 class="font-weight-normal mt-0">Views</h6>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="media">
              <span class="icon-dual align-self-center mr-2">
                <feather type="file-text"></feather>
              </span>
              <div class="media-body">
                <h5 class="mt-2 pt-1 mb-0 font-size-16">1k</h5>
                <h6 class="font-weight-normal mt-0">Posts</h6>
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-3 text-center">
          <div class="col">
            <button type="button" class="btn btn-primary btn-sm btn-block mr-1"
              >Follow</button
            >
          </div>
          <div class="col">
            <button type="button" class="btn btn-white btn-sm btn-block"
              >Message</button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
